<template>
	<div class="side">
		<div class="flex flex-pack-justify flex-align-center">
			<span>组织部门</span>
			<a-space :size="0">
				<a-button type="link" v-has="'sys:deptlist'">
					<router-link to="/sysManage/deptlist"><a-icon type="edit" /></router-link>
				</a-button>
				<a-button type="link" @click="refreshTree()"><a-icon type="sync" /></a-button>
			</a-space>
		</div>
		<div class="flex">
			<a-input-search
				class="flex-1"
				v-model="searchValue"
				placeholder="筛选部门"
				@search="searchTree()"
				allow-clear
			/>
			<a-button
				@click="cancelSearch"
				v-if="showlist"
				class="ant-btn-yellow"
				style="padding: 0 10px; margin-left: 5px"
				>取消</a-button
			>
		</div>
		<!-- 	:load-data="getDeptTree" -->
		<div class="dept">
			<a-tree
				v-if="!showlist"
				:tree-data="allFarmDeptTree"
				:expanded-keys="expandedKeys"
				:auto-expand-parent="autoExpandParent"
				:replaceFields="replaceFields"
				:selectedKeys.sync="treeKeys"
				:loadedKeys="loadedKeys"
				@select="selectTree"
				@expand="onExpand"
			>
				<template slot="title" slot-scope="{ deptName, deptType }">
					<img class="icon" src="../assets/img/other-icon.png" v-if="deptType == 'OTHER'" />
					<img class="icon" src="../assets/img/farm.png" v-if="deptType == 'FARM'" />
					<img class="icon" src="../assets/img/dept.png" v-if="deptType == 'HEAD_OFFICE'" />
					<img class="icon" src="../assets/img/zhihang.png" v-if="deptType == 'SUB_BRANCH'" />
					<span v-if="deptName.indexOf(searchValue) > -1" :title="deptName">
						{{ deptName.substr(0, deptName.indexOf(searchValue)) }}
						<span style="color: #f50">{{ searchValue }}</span>
						{{ deptName.substr(deptName.indexOf(searchValue) + searchValue.length) }}
					</span>
					<span v-else :title="deptName">{{ deptName }}</span>
				</template>
			</a-tree>
		</div>
		<div
			class="dept"
			v-if="showlist"
			v-infinite-scroll="handleInfiniteOnLoad"
			:infinite-scroll-disabled="busy"
			:infinite-scroll-distance="10"
		>
			<a-spin :spinning="loading" style="height: 100%">
				<a-menu v-model="menuselectedKeys">
					<a-menu-item :key="item.deptId" @click="handerDept(item)" v-for="(item, index) in deptlist">
						<img class="icon" src="../assets/img/other-icon.png" v-if="item.deptType == 'OTHER'" />
						<img class="icon" src="../assets/img/farm.png" v-if="item.deptType == 'FARM'" />
						<!-- <img class="icon" src="../assets/img/class-icon.png" v-if="item.deptType == 'CLASS'" /> -->
						<!-- <img class="icon" src="../assets/img/school-icon.png" v-if="item.deptType == 'SCHOOL'" /> -->
						{{ item.deptName }}
					</a-menu-item>
				</a-menu>
			</a-spin>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import { sysManageapi } from '@/api/index.js';
import infiniteScroll from 'vue-infinite-scroll';
export default {
	name: 'deptTree',
	props: {},
	data() {
		return {
			treeKeys: [],
			autoExpandParent: false,
			expandedKeys: [],
			loadedKeys: [],
			searchValue: '',
			replaceFields: { children: 'children', title: 'deptName', key: 'deptId', value: 'deptId' },
			pageNumber: 1,
			pageSize: 20,
			deptlist: [],
			menuselectedKeys: [],
			loading: false,
			busy: false,
			showlist: false,
		};
	},
	computed: {
		...mapState(['allFarmDeptTree', 'globalOrgId']),
		// bindDeptTree() {
		// 	return this.$store.getters.getBindDeptTree();
		// }
	},
	directives: { infiniteScroll },
	props: {},
	created() {
		this.getDeptTree();
	},
	watch: {
		globalOrgId(newV, oldV) {
			if (newV != oldV) {
				this.refreshTree();
			}
		},
	},
	methods: {
		...mapMutations(['SET_ALLFARMDEPTTREE']),
		getDeptTree() {
			this.confirmLoading = true;
			this.$postAction(sysManageapi.deptUrl.getList, {
				orgId: this.globalOrgId,
			})
				.then((res) => {
					if (res && res.code == 1) {
						this.SET_ALLFARMDEPTTREE(res.data);
						this.expandedKeys = res.data.map((item) => item.deptId);
					}
				})
				.finally(() => {
					this.confirmLoading = false;
				});
		},
		/* 刷新树节点 */
		refreshTree() {
			this.showlist = false;
			this.loadedKeys = [];
			this.expandedKeys = [];
			this.treeKeys = [];
			this.$emit('selected', null);
			this.getDeptTree();
		},
		/* 筛选部门树 */
		searchTree() {
			if (this.searchValue) {
				this.showlist = true;
				this.pageNumber = 1;
				this.getDeptlist();
			} else {
				this.showlist = false;
			}
		},
		/* 选中部门，刷新列表 */
		selectTree(selectedKeys, e) {
			let selectedDept = null;
			if (selectedKeys && selectedKeys.length > 0) {
				selectedDept = { ...e.node.dataRef };
			}
			this.$emit('selected', selectedDept);
		},
		onExpand(expandedKeys) {
			this.expandedKeys = expandedKeys;
			this.autoExpandParent = false;
		},
		getDeptlist() {
			this.loading = true;
			this.$postAction(sysManageapi.getDeptlist, {
				deptName: this.searchValue,
				pageNumber: this.pageNumber,
				pageSize: this.pageSize,
				// orgId: this.globalOrgId
			})
				.then((res) => {
					if (res && res.code == 1) {
						let list = [];
						if (this.pageNumber == 1) {
							list = res.data;
						} else {
							list = this.deptlist.concat(res.data);
						}
						this.deptlist = [...list];
						this.busy = this.deptlist.length == res.total;
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handerDept(dept) {
			if (this.menuselectedKeys.length > 0 && dept.deptId == this.menuselectedKeys[0]) {
				this.menuselectedKeys = [];
				this.$emit('selected', null);
			} else {
				this.$emit('selected', dept);
			}
		},
		handleInfiniteOnLoad() {
			if (!this.busy && !this.loading) {
				this.pageNum++;
				this.getDeptlist();
			}
		},
		cancelSearch() {
			this.showlist = false;
			this.menuselectedKeys = [];
			this.treeKeys = [];
			this.$emit('selected', null);
		},
		cancelSelect() {
			this.showlist = false;
			this.menuselectedKeys = [];
			this.treeKeys = [];
		},
	},
};
</script>

<style scoped="scoped" lang="less">
.side {
	width: 220px;
	padding: 20px;
	height: 100%;
	position: relative;
	.dept {
		position: absolute;
		top: 95px;
		bottom: 0;
		left: 20px;
		right: 20px;
		overflow: auto;
	}
}
.icon {
	height: 12px;
	width: 12px;
	vertical-align: -0.125em;
}
.ant-btn-yellow {
	color: #fff;
	background-color: #f8ac59;
	border-color: #f8ac59;
}
.ant-btn-yellow:hover {
	background-color: rgba(248, 172, 89, 0.8);
	border-color: rgba(248, 172, 89, 0.8);
	color: #fff;
}

.ant-btn-yellow:focus,
.ant-btn-yellow.active {
	background-color: rgba(248, 172, 89, 1);
	border-color: rgba(248, 172, 89, 1);
	color: #fff;
}
/deep/ .ant-tree li .ant-tree-node-content-wrapper {
	width: calc(100% - 24px);
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>